Ant Design Vue使用记录，持续记录 |
您所在的位置：网站首页 › ant design mobile vue › Ant Design Vue使用记录，持续记录 |
|
好些问题，每次解决了，下次遇到了又要重新翻文档，干脆就自己记录一下。 Ant Design Vue 1.x1.Form组件（2.x之后用法不同）Form.create(options) | this.form.createForm(this, options) ，通过JFX方式去定义一个Form组件的各种属性。经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用 this.form.createForm(this, options)；Form对象-----Form.Item对象 ------ decorator相关对象（参数为输入组件绑定的属性，相关数据选项），相关选项解释：https://antdv.com/components/form-cn/#API通过Form.create()创建的Form对象，绑定在a-form组件上，然后就可以把整个表单当做一整个对象去处理，每个输入型组件都可以通过v-decorator自定义自己的行为（表单验证等）。经过 getFieldDecorator或v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管。使用 Form.create 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 Form.create 并自行处理数据。setFieldsValue设置表单默认值，必须在Form渲染之后进行，必须和参数对应，参数数量只能少或者相对相等，不能多。2.使用过的组件加载中（a-spin）：https://antdv.com/components/spin-cn/栅格系统（a-row、a-col）：https://antdv.com/components/grid-cn/表单（a-form、a-form-item）：https://antdv.com/components/form-cn/布局（a-layout...）：https://antdv.com/components/layout-cn/卡片（a-card）：https://antdv.com/components/card-cn/3.表格（a-table）提示 官方文档：https://antdv.com/components/table-cn/#API API详解：columns，指定一个对象用于配置表格列。dataSource，用于指定表格的数据源。loading，是否显示加载特效。rowKey，用于指定每个表格列的key值，可指定一个字符串或者一个参数为每行的数据对象的函数。pagination，绑定的分页组件，https://antdv.com/components/pagination-cn/表格列描述对象（Column）：dataIndex，对应数据对象中哪一个数据？（指定属性名），可以不指定该属性，使用插槽时slot-scope传递的是整个数据行对象。 { title: 'Action', key: 'action', scopedSlots: { customRender: 'action' }, }key，绑定一个vue需要的key值。（数据对象内的属性名） customRender，绑定一个处理数据的自定义函数。 title，显示的列标题文字。 slots，使用 columns 时，可以通过该属性配置支持 slot 的属性，如 slots: { filterIcon: 'XXX'}，代表这个在表格内可以使用插槽名为XXX的插槽来代替filterIcon属性（column支持的一个属性）的值。 scopedSlots: { customRender: 'tags' }, 指定一个名为tags的插槽，用来展示当前列的值，slot-scope值为指定列的值和行值。和customRender只能生效一个。 customRender，自定义该列的数据渲染，列的值为函数的返回值。和scopedSlots只能生效一个。 scopedSlots: { customRender: 'name' }, customRender:(text, record, index)=>{ return text; } //表格内插槽在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。 注意 如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类奇怪的错误。 3.select选择框value传过去了但是显示的是value 而不是显示对应的选项，是因为传过去的值是number类型，而值是string类型，设置的value值跟选项的value值不相等，所以就找不到对应的选项值，转化为string类型就可以解决了。 4.upload官方链接：https://1x.antdv.com/components/upload-cn/#components-upload-demo-default-files 受控的上传文件列表。可以自定义fileList的元素，upload的上传列表将对应的显示。使用 defaultFileList 设置已上传的内容。支持列表图片、照片墙、插槽等自定义上传的UI样式。 fileList: [ { uid: '-1', name: 'xxx.png', status: 'done', url: 'http://www.baidu.com/xxx.png', }, ],Ant Design Vue 2.x1.Table组件常用属性 相关 属性columns，列的配置对象，https://2x.antdv.com/components/table-cn#APIloading布尔值，是否显示表格的加载效果。data-source，表格的数据源对象。pagination，表格的分页相关配置，https://2x.antdv.com/components/pagination-cnbordered，布尔值，是否显示表格竖向的边框。scroll，用于固定表头，以及行数据滚动。rowKey，每列的key值，作用同vue 的key。@change，分页、排序、筛选变化时触发的事件。size，表格的大小。columns 配置对象align，设置内容的对齐方式，left、right、centerellipsis，超过宽度将自动省略，暂不支持和排序筛选一起使用。title，表格头的标题。dataIndex，对应数据对象内的键。width:，指定表格列的宽度，字符串类型。key ，Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性。customRender，自定义渲染函数，Function({text, record, index})；slots，指定某些列属性作为插槽来使用，例如指定customRender属性后，可直接使用插槽代替自定义输出； slots: {customRender: 'content'}sorter，指定一个自定义排序的函数，同Array的排序。pagination分页首先需要在表格组件上配置pagination属性，点击换页时会触发change事件，事件参数为改变后的pagination对象。 pagination: { pageSize: 30,//每页条数 showSizeChanger: true, current: 1, total:0, pageSizeOptions:["30","50","100"] }, //分页器配合Thinkphp分页时，传递size和page给后端，请求成功后更新总数量、当前页。 自定义列通过回调函数输出值： customRender:(moments)=>{ return '每月的'+moments+"号" }通过插槽自定义输出，下面是指定某个列属性通过插槽输出，指定customRender代表自定义列： slots: {customRender: 'action'}, //表格插槽输出 2.栅格布局没有匹配到设置的响应式参数时，会使用默认参数，例如没有设置xl的参数，xl大小的屏幕会使用默认值。 3.datepicker汉化无效Antd-design-vue 2.x ，使用datepicker选择器在vite工具下，中文设置无效的解决办法（大概原因是中文语言包没有被正常引入，只能强行设置中文）： import moment from 'moment'; moment.locale('zh-cn',{ months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split( '_' ), monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split( '_' ), weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'), weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'), weekdaysMin: '日_一_二_三_四_五_六'.split('_'), longDateFormat: { LT: 'HH:mm', LTS: 'HH:mm:ss', L: 'YYYY/MM/DD', LL: 'YYYY年M月D日', LLL: 'YYYY年M月D日Ah点mm分', LLLL: 'YYYY年M月D日ddddAh点mm分', l: 'YYYY/M/D', ll: 'YYYY年M月D日', lll: 'YYYY年M月D日 HH:mm', llll: 'YYYY年M月D日dddd HH:mm', }});import moment from 'moment' import 'moment/dist/locale/zh-cn' moment.locale('en')4.DatePicker 组件绑定的是一个ref的响应式变量（moment()），返回的是一个普通的时间字符串； let datetime = ref(moment()); /*计算当前的时间范围*/ let current = computed(() => { let datetimes = moment(datetime.value); if (type.value == 'day') { return datetimes.format("MM月DD日") + "0点" + " 到 " + datetimes.format("MM月DD日") + "24点"; } else if (type.value == 'week') { return datetimes.startOf('week').format("MM月DD日") + "0点" + " 到 " + datetimes.endOf('week').format("MM月DD日") + "24点"; } else if (type.value == 'month') { return datetimes.startOf('month').format("MM月DD日") + "0点" + " 到 " + datetimes.endOf('month').format("MM月DD日") + "24点"; }5.Form组件。绑定数据和表单验证 姓名 const formState = reactive({ name: '', idCard:'' }); const rules = { name: [ { required: true, message: 'Please input Activity name', trigger: 'blur', }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur', }, ], idCard: [ { required: true, message: 'Please select Activity zone', trigger: 'change', }, ] }; const onSubmit = () => { formRef.value .validate() .then(() => { console.log('values', formState, toRaw(formState)); }) .catch(error => { console.log('error', error); }); };6. 单独使用message和Modal组件时，需要单独引入cssimport "ant-design-vue/es/message/style/css" import "ant-design-vue/es/modal/style/css"7.软件包动态引入let icon=()=>import('@ant-design/icons-vue'); console.log(icon());8.菜单 问题总结1.Form组件表单校验规则不生效Form-Item组件的name属性必须和属性名一致，不填写name时不会进行校验 通过自定义验证方法，来验证form绑定的数据对象，内部对象的属性是否有效。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |